<template>
  <div class="rate">
    <nav>好评最高的5本书</nav>
    <div class="content">
      <div
        class="card"
        v-for="item in Rate"
        :key="item.id"
        @click="goDetail(item)"
      >
        <div class="image">
          <el-image
            :src="`${$Imgurl}/api/public/showImg/${item.picture}`"
            class="image"
          ></el-image>
        </div>
        <h5>
          {{ item.name }}
        </h5>
        <h6>
          <span>￥{{ item.price }}</span>
        </h6>
      </div>
    </div>
    <nav>销量最高的5本书</nav>
    <div class="content">
      <div class="card" v-for="item in Sale" :key="item.id" @click="goDetail(item)">
        <div class="image">
          <el-image
            :src="`${$Imgurl}/api/public/showImg/${item.picture}`"
            class="image"
            lazy
          ></el-image>
        </div>
        <h5>
          {{ item.name }}
        </h5>
        <h6>
          <span>￥{{ item.price }}</span>
        </h6>
      </div>
    </div>
    <nav>意向最高的5本书</nav>
    <div class="content">
      <div class="card" v-for="item in Fav" :key="item.id" @click="goDetail(item)">
        <div class="image">
          <el-image
            :src="`${$Imgurl}/api/public/showImg/${item.picture}`"
            class="image"
            lazy
          ></el-image>
        </div>
        <h5>
          {{ item.name }}
        </h5>
        <h6>
          <span>￥{{ item.price }}</span>
        </h6>
      </div>
    </div>

    <transition name="van-fade">
      <!-- <van-icon name="upgrade" size="1.2rem" color="gainsboro" v-show="visable" @click="goTop()"/> -->
      <el-image
        src="http://img63.ddimg.cn/upload_img/00610/core/gotop.png"
        class="icons"
        v-show="visable"
        @click="goTop()"
      ></el-image>
    </transition>
    <nav>精选书单</nav>
    <div class="content">
      <div class="card" v-for="item in allBook" :key="item.id" @click="goDetail(item)">
        <div class="image">
          <el-image
            :src="`${$Imgurl}/api/public/showImg/${item.picture}`"
            class="image"
            lazy
          ></el-image>
        </div>
        <h5>
          {{ item.name }}
        </h5>
        <h6>
          <span>￥{{ item.price }}</span>
        </h6>
      </div>
    </div>

    <div class="entry"></div>
  </div>
</template>

<script>
import { $post } from "@/ajax";
import { mapMutations } from "vuex";
export default {
  name: "HomeBook",
  data() {
    return {
      Rate: [],
      Sale: [],
      Fav: [],
      allBook: [],
      visable: false,
    };
  },
  methods: {
    getScoll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop >= 400) {
        this.visable = true;
      } else {
        this.visable = false;
      }
    },

    //加入购物车
    addCart(id) {
      let bookid = id;
      $post(`/api/public/addCart/${bookid}`)
        .then((res) => {
          if (res.status === 200) {
            this.$toast.success({
              duration: 1000,
              message: "已添加购物车",
            });
          }
        })
        .catch((error) => {
          // this.$message.error({
          //   duration: 600,
          //   grouping: true,
          //   message: "你尚未登录,请登录~",
          // });

          this.$toast.fail({
            duration: 1000,
            message: "你尚未登录",
          });
        });
    },

    ...mapMutations("detail", ["getBook"]),
    goDetail(item) {
      console.log(item);
      let data = "";
      this.getBook(data);
      if (item) {
        this.getBook(item);
        this.$router.push("/bookdetail");
      }
    },

    goTop() {
      window.scrollTo(0, 0);
    },
  },

  mounted() {
    window.addEventListener("scroll", this.getScoll);
  },

  created() {
    this.axios
      .get(`/api/public/book/findRate5`)
      .then((res) => {
        if (res.status === 200) {
          this.Rate = res.data.data;
        }
      })
      .catch((error) => {
        console.log(error);
      });

    this.axios
      .get(`/api/public/book/findSale5`)
      .then((res) => {
        if (res.status === 200) {
          this.Sale = res.data.data;
        }
      })
      .catch((error) => {
        console.log(error);
      });

    this.axios
      .get(`/api/public/book/findFav5`)
      .then((res) => {
        if (res.status === 200) {
          this.Fav = res.data.data;
        }
      })
      .catch((error) => {
        console.log(error);
      });

    this.axios
      .get(`/api/public/findBookByPage/0/8/0`)
      .then((res) => {
        if (res.status === 200) {
          let total = res.data.data.total;
          this.axios
            .get(`/api/public/findBookByPage/0/${total}/0`)
            .then((res) => {
              if (res.status === 200) {
                this.allBook = res.data.data.books;
              }
            })
            .catch((error) => {
              console.log(error);
            });
        }
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-style: normal;
  font-weight: normal;
}

nav {
  width: 96%;
  margin: 0.2rem 2%;
  height: 1rem;
  line-height: 1rem;
  color: white;
  text-align: center;
  background-color: #e3b074;
  font-weight: bold;
  font-size: 0.4rem;
}

.content {
  width: 96%;
  margin: 0.2rem 2%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}

.content .card {
  width: 48%;
  height: 6rem;
  margin: 0.1rem 0.5%;
  border: 1px solid gainsboro;
  border-radius: 0.1rem;
}

.content .card .image {
  width: 100%;
  height: 4.5rem;
}

.content .card .image img {
  width: 100%;
  height: 100%;
}

.content .card h5 {
  width: 96%;
  margin: 0.1rem 2%;
  text-align: center;
  font-size: 0.35rem;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content .card h6 {
  text-align: center;
}

.content .card h6 span,
.content .card h6 label {
  display: inline-block;
  color: gray;
  font-size: 0.4rem;
  width: 1.2rem;
  height: 0.6rem;
  line-height: 0.6rem;
}

.content .card h6 label {
  color: white !important;
  background-color: #f56c6c;
  border-radius: 0.1rem;
}

.entry {
  width: 100%;
  height: 0.1rem;
}

.icons {
  position: fixed;
  top: 15rem;
  z-index: 10;
  left: 8.8rem;
}
</style>
